<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/core.css">
    <title>test</title>
</head>
<body>
<style>
    .items{
        width:100%;
        height:4.5rem;
        text-align: center;
    }
    .item{
        margin-top:1.5rem;
        display: inline-block;
        width:22%;
        /*这里的 text-align:center; 能让 每个li.item 里面的 文本居中显示*/
        text-align: center;
    }
    /*图标的共有 属性*/
    .icon{
        display: block;
        /*这里的 margin:0 auto; 能让 每个 li.item 里面的 图标 居中显示*/
        margin:0 auto;
    }
    /*每个图标的 私有属性*/
    .category{
        width: 1.1rem;
        height: 1.1rem;
        background:url(images/spirits.png) no-repeat 0rem -10.5rem;
        background-size:21rem  21rem;
    }
    .rank{
        width: 1.1rem;
        height: 1.1rem;
        background:url(images/spirits.png)  no-repeat -2.3rem -10.5rem;
        background-size:21rem  21rem;
    }
    .time{
        width: 1.2rem;
        height: 1.2rem;
        background:url(images/spirits.png) no-repeat -4.95rem -10.4rem;
        background-size:21rem  21rem;
    }
    .history{
        width: 1.2rem;
        height: 1.2rem;
        background: url(images/spirits.png) no-repeat -7.6rem -10.4rem;
        background-size:21rem  21rem;
    }
    /*图标下面的 文字的样式设置*/
    .name{
        display: block;
        margin-top: 0.25rem;
        font-size: 0.6rem;
        color: #969696;
    }
</style>


<div>
    <ul class="items">
        <li class="item">
            <a href="category.html" class="link">
                <i class="icon category"></i>
                <span class="name">分类</span>
            </a>
        </li>

        <li class="item">
            <a href="javascript:;" class="link">
                <i class="icon rank"></i>
                <span class="name">排行</span>
            </a>
        </li>

        <li class="item">
            <a href="javascript:;">
                <i class="icon time"></i>
                <span class="name">追更</span>
            </a>
        </li>

        <li class="item">
            <a href="javascript:;">
                <i class="icon history"></i>
                <span class="name">历史</span>
            </a>
        </li>
    </ul>
</div>

</body>
</html>